<template>
  <div class="incent">
    <!-- 砍价拼菜 -->
    <div class="hotlist_content">
      <div class="content-header">
        <h3>
          砍价拼菜
          <span class="richText">无套路一刀也优惠</span>
        </h3>
        <div class="total">
          <router-link to="/detailsTop?falg=41" style="color:#fff">
            <span>全部</span>
            <i style="width:12px;" class="el-icon-arrow-right"></i>
          </router-link>
        </div>
      </div>
      <ul class="list_ul">
        <li
          v-for="(item,index) of bargain"
          :key="index"
          class="item-list"
          @mouseover="toggleShow(2,item.id)"
          @mouseout="toggleShow(2)"
          @click="articleDetails(item.shop.id,item.id)"
        >
          <div class="content" >
            <div class="img_box">
              <img class="skuimg" :src="item.skuPic" alt>
              <div id="qrcode" class="qrcode_img" v-if="item.id == isShowInd"></div>
            </div>
            <div class="info_box">
              <div class="title">{{item.skuName}}</div>
              <div class="invite">邀请5个好友砍价</div>
              <div class="address">{{item.shopName}}</div>
              <div class="price_box">
                <span class="current_price">
                  <span class="yuan">可砍到￥</span>
                  <span class="price_number">{{item.actGoodsSkuOut.goodsPromotionRules.actAmount}}</span>
                  <span class="sell_price">￥{{item.sellPrice}}</span>
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 秒杀商品 -->
    <div class="recreation">
      <div class="headline-more">
        <div class="headline-more-left">
          <p>限量秒杀</p>
          <span>有格调是生活的一种方式</span>
        </div>
        <div class="headline-more-right">
          <router-link to="/detailsTop?falg=44" style="color:#fff">
            <span>全部</span>
            <i style="width:12px;" class="el-icon-arrow-right"></i>
          </router-link>
        </div>
      </div>
      <div class="seckill-commodity">
        <div class="time-seckill">
          <img src="../../../static/images/seckill.png" alt>
        </div>
        <div class="time-seckill-Y">
          <div
            class="time-seckill-ss"
            v-for="(item,index) in spikelist1"
            :key="index"
            @mouseover="toggleShow(4,item.id)"
            @mouseout="toggleShow(4)"
           @click="articleDetails(item.shop.id,item.id)"
          >
            <div class="time-seckill-top">
              <div id="qrcode" class="qrcode_img" v-if="item.id == isShowInd2"></div>
              <img class="time-seckill-top-img2" :src="item.skuPic" alt>
            </div>
            <div class="symbol">
              <span>￥0.1元秒杀</span>
            </div>
            <div class="time-seckill-name">
              <span>{{item.skuName}}</span>
            </div>
            <div class="time-seckill-price">
              <div class="time-seckill-cost">
                <div class="time-seckill-cost-1">
                  <p>
                    ￥
                    <span>0.01</span>
                  </p>
                </div>
                <div class="time-seckill-cost-2">
                  <p>
                    ￥
                    <span>{{item.sellPrice}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="variety">
            <div class="block">
              <el-carousel height="300px">
                <el-carousel-item v-for="(item,index) in spikelist2" :key="index">
                  <img class="variety-img" :src="item.skuPic" alt @click="articleDetails(item.shop.id,item.id)">
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 团购 -->
    <div class="groupPurchase" v-if="purchase2.length>0">
      <div class="headline-more">
        <div class="headline-more-left">
          <p>团购</p>
          <span>为你甄选最适合的</span>
        </div>
        <div class="headline-more-right">
          <router-link to="/detailsTop?falg=43" style="color:#fff">
            <span>全部</span>
            <i style="width:12px;" class="el-icon-arrow-right"></i>
          </router-link>
        </div>
      </div>
      <!-- 团购商品 -->
      <div class="groupWrap">
        <div class="groupImg">
          <img src="../../../static/images/booking.png" alt>
        </div>
        <div class="group-right">
          <div class="group-right-L">
            <div class="group-right-L-T" v-for="(item,index) in purchase1" :key="index">
              <img :src="item.skuPic" alt>
            </div>
          </div>
          <div class="group-right-R">
            <div class="group-right-R-thing" v-for="(item,index) in purchase2" :key="index">
              <img :src="item.skuPic" alt srcset>
              <img class="stance-img" :src="item.imgs" alt srcset>
              <div class="group-message">
                <p>{{item.skuName}}</p>
                <p>
                  <span class="amount">满{{item.number}}人开团</span>
                  <span>{{item.already}}/{{item.under}}</span>
                </p>
                <div class="cost-price">
                  <div class="cost-price-left">
                    <div>
                      <span>现￥:{{item.actGoodsSkuOut.goodsPromotionRules.actAmount}}</span>
                    </div>
                    <div class="original">
                      <span>原￥:{{item.sellPrice}}</span>
                    </div>
                  </div>
                  <button>立即抢购</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
   
<script>
import Bus from "./../../assets/js/bus.js";
export default {
  name: "incent",
  data() {
    return {
      bargain: [], //砍价列表
      purchase1: [], //拼购列表1
      purchase2: [], //拼购列表2
      spikelist1: [], //秒杀列表1
      spikelist2: [], //秒杀列表2
      isShowInd: "",
      isShowInd2: ""
    };
  },
  mounted() {
    Bus.$on("refresh", message => {
      // 这里的message就是从广播中传来的数据
      this.init();
    });
  },
  methods: {
    toggleShow(type, val) {
      let arr = [];
      if (type == 2) {
        this.isShowInd = val;
        arr = this.bargain;
      } else if (type == 4) {
        this.isShowInd2 = val;
        arr = this.spikelist1;
      }
      for (let i in arr) {
        if (val == arr[i].id) {
          let _Url =
            "https://www.xiang7.net/service?flag=" +
            type +
            "&id=" +
            arr[i].id +
            "&shopId=" +
            arr[i].actGoodsSkuOut.shopId +
            "&categoryId=" +
            arr[i].categoryId +
            "&actId=" +
            arr[i].actGoodsSkuOut.actId;
          $("#qrcode").qrcode(_Url);
        }
      }
    },
    articleDetails(shopid,id) {
      this.$router.push({ name: "storeinformation",query:{shopId:shopid,id:id}});
    },
    getdishDAta(val) {
      let _this = this,
        _value = "",
        _city = sessionStorage.getItem("city");
      _value = "page=1&rows=8&city=" + _city + "&actId=" + val;
      this.$axios
        .get("/api/website/goodsSku/approve/listForAct?" + _value)
        .then(res => {
          if (res.data.code == 0) {
            let _list = res.data.data.list;
            if (_list.length > 0) {
              if (val == 41) {
                _this.bargain = _list.slice(0, 5);
              } else if (val == 43) {
                _this.purchase1 = _list.slice(1, 2);
                _this.purchase2 = _list.slice(3);
              } else if (val == 44) {
                _this.spikelist1 = _list.slice(0, 3);
                _this.spikelist2 = _list.slice(4, 6);
              }
            }
          }
        })
        .catch(err => {
          console.log("err:", err);
        });
    },
    init() {
      this.getdishDAta(41);
      this.getdishDAta(44);
      this.getdishDAta(43);
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="less">
.incent {
  .hotlist_content {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    padding-top: 46px;
    .content-header {
      width: 100%;
      height: 50px;
      box-shadow: darkgrey 2px 0px 1px 1px;
      height: 50px;
      background: linear-gradient(
        to right,
        rgb(194, 176, 142) 3%,
        rgb(190, 164, 116) 100%
      );
      color: #fff;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .richText {
        font-size: 14px;
        padding-left: 18px;
      }
      h3 {
        font-size: 18px;
        font-weight: 400;
        margin-left: 13px;
        margin-right: 10px;
        padding: 0 5px;
        flex: 1;
      }
      .total {
        margin-right: 14px;
        cursor: pointer;
        user-select: none;
        font-size: 14px;
        // line-height: 50px;
      }
    }
    .list_ul {
      padding: 0 10px;
      border-left: 1px solid #ebebeb;
      border-right: 1px solid #ebebeb;
    }
    .item-list {
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      width: 20%;
      padding: 10px 0;
      cursor: pointer;
      vertical-align: middle;
      .img_box {
        height: 0;
        width: 100%;
        padding-bottom: 100%;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        .skuimg {
          width: 100%;
        }
        .qrcode_img {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          width: 100%;
          height: 100%;
        }
        canvas {
          width: 100% !important;
          height: 100% !important;
        }
      }
      .info_box {
        position: relative;
        margin-top: 10px;
        .title {
          font-size: 16px;
          line-height: 22px;
          width: 100%;
          color: #222;
          height: 22px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .invite {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #fb682f;
        }
        .address {
          font-size: 12px;
          color: #999;
        }
        .price_box {
          display: flex;
          flex-direction: row;
          height: 28px;
          .current_price {
            text-align: left;
            .yuan {
              font-size: 14px;
              font-weight: 700;
              color: #f60;
            }
            .price_number {
              color: #f60;
              font-size: 22px;
              letter-spacing: -0.5px;
              margin-left: -5px;
              font-family: numbers !important;
            }
            .sell_price {
              font-size: 16px;
              color: #666;
              margin-left: 8px;
              text-decoration: line-through;
            }
          }
        }
      }
    }
    .item-list:last-child {
      padding-right: 0 !important;
      margin-right: 0 !important;
    }
    .item-list .content {
      padding: 10px;
    }
    .item-list .content:hover .qrcode_img {
      display: block;
    }
    .item-list .content:hover {
      background: #f4f4f4;
      -webkit-transition: background-color 0.5s;
      -ms-transition: background-color 0.5s;
      transition: background-color 0.5s;
      border-radius: 4px;
    }
  }
  .recreation {
    width: 100%;
    padding: 30px 0px 20px 0px;
    border-bottom: 1px solid #ebebeb;
  }
  .headline-more {
    width: 100%;
    height: 50px;
    background: linear-gradient(
        to right,
        rgb(18, 210, 198) 2%,
        rgb(14, 190, 212) 97%
      )
      rgb(18, 210, 198);
    box-shadow: darkgrey 2px 2px 1px 1px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    .headline-more-left {
      display: flex;
      align-items: center;
      letter-spacing: 2px;
      p {
        padding: 0px 18px 0px 16px;
        font-size: 18px;
      }
      span {
        font-size: 14px;
      }
    }
    .headline-more-right {
      padding-right: 14px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .seckill-commodity {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    .time-seckill {
      width: 234px;
      height: 300px;
    }
    .time-seckill-Y {
      //   width: 960px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      & > div {
        margin-left: 20px;
      }
      .variety {
        width: 585px;
        height: 300px;
        .variety-img {
          width: 100%;
          height: 300px;
        }
        .el-carousel__item h3 {
          color: #475669;
          font-size: 14px;
          opacity: 0.75;
          line-height: 150px;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
        .el-carousel__item.is-active {
          z-index: 0;
        }
      }
      .time-seckill-ss {
        width: 232px;
        height: 300px;
        border: 1px solid #b7bcb8;
        position: relative;
        .symbol {
          width: 76px;
          height: 18px;
          background-color: #e6382f;
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          line-height: 18px;
          position: relative;
          top: -220px;
          left: 77px;
        }
        .time-seckill-top {
          width: 100%;
          height: 220px;
          background-color: palegreen;
          position: relative;
          overflow: hidden;
          .time-seckill-top-img2 {
            width: 232px;
            height: 220px;
          }
          .time-seckill-top-img1 {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 11;
            width: 100%;
            height: 100%;
          }
          .qrcode_img {
            position: absolute;
            z-index: 1000;
          }
          canvas {
            width: 232px !important;
            height: 220px !important;
          }
        }
        .time-seckill-name {
          width: 100%;
          height: 30px;
          span {
            color: #666666;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 30px;
            text-indent: 10px;
            text-align: center;
          }
        }
        .time-seckill-price {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          .time-seckill-cost {
            width: 191px;
            height: 24px;
            display: flex;
            justify-content: space-between;
            border: 1px solid #e6382f;
            .time-seckill-cost-1 {
              width: 95px;
              height: 25px;
              background-color: #e6382f;
              color: #ffffff;
              text-align: center;
              line-height: 24px;
              font-size: 18px;
              p {
                font-size: 14px;
              }
              span {
                font-size: 18px;
              }
            }
            .time-seckill-cost-2 {
              width: 95px;
              height: 24px;
              background-color: #ffffff;
              color: #b7bcb8;
              text-align: center;
              line-height: 24px;
              text-decoration: line-through;
              font-size: 14px;
            }
          }
        }
      }
      .time-seckill-ss:hover .time-seckill-top-img1 {
        display: block;
      }
    }
  }
  .groupPurchase {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
    .headline-more {
      width: 100%;
      height: 50px;
      background-color: rgb(190, 164, 116);
      background-image: linear-gradient(
        to right,
        rgb(255, 113, 74) 2%,
        rgb(252, 66, 66) 97%
      );
      box-shadow: darkgrey 2px 2px 1px 1px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      .headline-more-left {
        display: flex;
        align-items: center;
        letter-spacing: 2px;
        p {
          padding: 0px 18px 0px 16px;
          font-size: 18px;
        }
        span {
          font-size: 14px;
        }
      }
      .headline-more-right {
        padding-right: 14px;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .groupWrap {
      width: 100%;
      height: 440px;
      display: flex;
      justify-content: space-between;
      .groupImg {
        width: 234px;
        height: 440px;
      }
      .group-right {
        // width: 81%;
        height: 440px;
        display: flex;
        justify-content: space-between;
        .group-right-L {
          width: 40%;
          height: 440px;
          .group-right-L-T {
            width: 100%;
            height: 49.6%;
            background-color: seagreen;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .group-right-L div:nth-child(2) {
          border-top: 2px solid #b7bcb8;
          border-bottom: 2px solid #b7bcb8;
        }
        .group-right-R {
          width: 60%;
          height: 440px;
          display: flex;
          flex-wrap: wrap;
          cursor: pointer;
          .group-right-R-thing {
            width: 32.99%;
            height: 49.6%;
            border-right: 2px solid #b7bcb8;
            position: relative;
            .stance-img {
              width: 99.78%;
              height: 60%;
              position: absolute;
              top: 0px;
              left: 0px;
              display: none;
            }
            img {
              width: 99.78%;
              height: 60%;
            }
            .group-message {
              width: 100%;
              height: 40%;
              p {
                text-align: center;
                font-size: 12px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                padding: 0px 8px;
              }
              .cost-price {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-top: 6px;
                .cost-price-left {
                  width: 50%;
                  height: 36px;
                  border: 1px solid #e6382f;
                  div {
                    background-color: #e6382f;
                    color: #ffffff;
                    font-size: 16px;
                    text-align: center;
                    line-height: 18px;
                    height: 18px;
                  }
                  .original {
                    width: 100%;
                    height: 50%;
                    background-color: #ffffff;
                    color: #333;
                    font-size: 12px;
                  }
                }
                button {
                  background-color: #e6382f;
                  border: none;
                  color: #ffffff;
                  font-size: 14px;
                  letter-spacing: 2px;
                  width: 40%;
                  height: 26px;
                  line-height: 26px;
                  border-top-left-radius: 16px;
                  border-top-right-radius: 16px;
                  border-bottom-left-radius: 16px;
                  border-bottom-right-radius: 16px;
                }
              }
            }
            .group-message p:nth-child(2) {
              background-color: #c9c1c1;
              color: #fc5e2d;
            }
            .amount {
              color: #ffffff;
              padding-right: 20px;
            }
          }
          .group-right-R-thing:hover .stance-img {
            display: block;
          }
          .group-right-R-thing:nth-child(4) {
            border-top: 2px solid #b7bcb8;
            border-bottom: 2px solid #b7bcb8;
          }
          .group-right-R-thing:nth-child(5) {
            border-top: 2px solid #b7bcb8;
            border-bottom: 2px solid #b7bcb8;
          }
          .group-right-R-thing:nth-child(6) {
            border-bottom: 2px solid #b7bcb8;
            border-top: 2px solid #b7bcb8;
          }
        }
      }
    }
  }
}
</style>


